
<template>  <!-- 可以把列表项放入template标签中，然后进行批量渲染 。-->

 <!-- 每一个div占满一整行——块级标签,class类名用于标识和选择元素的样式 -->
  <div class="mod-config">
   <!--el-form表单 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据,
          “:” 是指令 “v-bind”的缩写，用于响应式地更新 HTML 特性，想要响应式的绑定一个属性都会选择v-bind，可以动态的获取 data
          “@”是指令“v-on”的缩写，监听用户的点击, 拖拽, 键盘事件等
          -->
    <!-- inline	行内表单模式，指定是否同行，boolean类型，model用于保存表单的数据对象object类型，
     @keyup.enter.native="按钮绑定的事件名"，用于监听原生的keyup事件并检测是否按下了Enter键，当用户释放按键时，如果按下的是Enter键，则会调用`""`里的方法来处理逻辑 -->
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
      <el-form-item><!-- el-form-item 用来展示表单项标签, 一个el-form-item中有多个输入框，每个输入框都需要单独嵌套在el-form-item中，此操作可以单独校验每个输入框-->
       <!--el-input 为受控组件,通过鼠标或键盘输入字符,v-model更新组件的绑定值 placeholder="参数名"是输入框占位文本， clearable为清空按钮，默认false-->
        <el-input v-model="dataForm.paramKey" placeholder="参数名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <!--el-button 常用的操作按钮。 @click="search()"用户点击查询search()-->
        <el-button @click="search()">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<!--script脚本标签，用于在 HTML 页面中嵌入 JavaScript 代码。-->
<script>
//export default用于导出模块的默认值，而命名导出使用export关键字后跟变量名或函数名。一个模块只能有一个默认导出，但可以有多个命名导出。
// export用于从模块中导出函数、类、变量等，以便在其他文件中使用
  export default {  
    data () { //将 data 设置为函数，每次创建新的组件实例时，会调用该函数以返回一个新的数据对象。这确保了每个组件实例都有独立的数据状态，不会相互干扰。
      return {//每次创建一个新实例后，我们能够调用 data函数，从而用return返回初始数据的一个全新副本数据对象。不使用return包裹的数据会在项目的全局可见，会造成变量污染
        dataForm: {//?
          paramKey: ''//?
        }
      }
    },
    components: {// components 组件注册
    },
    //?
    activated () {//路由组件被激活时触发,activated()函数就是一个页面激活后的钩子函数，一进入页面就触发,所以当我们运用了组件缓存时，如果想每次切换都发送一次请求的话，需要把请求函数写在activated中
    },
    methods: {// methods 编写js函数
      // 查询
      search() {
        this.pageIndex = 1//页码
        this.getDataList()
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true//设置加载状态
        this.$http({//发送HTTP请求，通过axios发送get请求来获取数据列表，并在请求成功时处理响应
          //this.$http.adornUrl()和this.$http.adornParams()是axios拦截器中拦截的函数，可以对url和params进行处理
          url: this.$http.adornUrl('/sys/config/list'),//发送请求的路径
          method: 'get',//方式为GET请求
          params: this.$http.adornParams({//是用来传递查询参数的部分，是封装操作
            'page': this.pageIndex,//页码
            'limit': this.pageSize,//分页大小
            'paramKey': this.dataForm.paramKey//?
          })
          //=>函数 可以在函数中使用this 来引用全局的vue对象，若函数的参数为空或是大于一个参数时，必须有括号。若只有一个参数，则可以省略括号
          // then(({data}) => { 里的data是指接口成功返回的数据,包含请求头,请求体,等信息,  请求的响应 data是响应体
        }).then(({data}) => {//.then 方法通常用于处理异步操作的返回结果
          if (data && data.code === 0) {//判断date是否为真值，并且data.code 是否严格等于0，都为真就执行里面的语句，通常表示请求成功 打印整个响应体
            console.log(data);//调用console中的log方法来在在网页日志中输出
          } else {
            console.log(data);//调用console中的log方法来在在网页日志中输出
          }
        })
      }
    }
  }
</script>
